<template>
  <div id="login">
    <!-- 加载动画 -->
    <load v-if="!isLoaded" />
    <!-- 显示正常内容 -->
    <div v-if="isLoaded" class="center">
      <div class="login_container">
        <div class="login">
          <div class="title">
            <span>基础框架后台管理</span>
          </div>
          <div class="login_form">
            <el-form
              ref="form"
              :model="loginformUser"
              label-width="80px"
              @keyup.enter="onSubmit"
            >
              <el-form-item>
                <el-input
                  v-model="loginformUser.username"
                  placeholder="请输用户名"
                  prefix-icon="el-icon-user-solid"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="password"
                  v-model="loginformUser.password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <div style="float: left; width: 240px">
                  <el-input
                    type="text"
                    v-model="loginformUser.code"
                    placeholder="请输入验证码"
                    width="120%"
                  >
                  </el-input>
                </div>
                <div style="float: right; margin-top: 2px">
                  <el-image
                    @click="refreshCode"
                    style="width: 100px; height: 36px"
                    :src="this.url"
                  ></el-image>
                </div>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="agreement" style="color: rgb(71 68 68)"
                  >我已阅读并同意</el-checkbox
                >
                <span>《用户协议》</span>
              </el-form-item>
              <el-form-item>
                <el-button
                  :loading="loading"
                  type="primary"
                  style="width: 100%"
                  @click="onSubmit"
                >
                  {{ loading ? "登录中..." : "登录" }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import load from "../load/index.vue";  
import { onMounted } from "vue";
export default {
  name: "login",
  components: {
    load,
  },
  data() {
    return {
      loginformUser: {
        username: "",
        password: "",
        code: "",
        uuid: "", // 验证码的uuid
      },
      loading: false, // 用于控制加载图标的显示
      url: "",
      agreement: false, // 是否同意用户协议
      isLoaded: false, // 是否加载完成
    };
  },
  methods: {
    loaded() {
        setTimeout(() => {
          this.isLoaded = true; // 将加载状态设置为已完成
        }, 700);
      
    },
    //获取验证码
    getCode() {
      this.$http.get("/captchaImage").then((res) => {
        this.url = "data:image/gif;base64," + res.data.img;
        this.loginformUser.uuid = res.data.uuid;  
      });
    },

    // 登录按扭 密码登录
    onSubmit() {
      if (this.agreement) {
        this.loading = true; // 显示加载图标
        this.$http
          .post("/api/sysUser/loginByPwd", this.loginformUser)
          .then((res) => {
            this.loading = false; // 隐藏加载图标
            console.log(res.data.data);
            if (res.data.code === 200) {
              // 获取token
              localStorage.setItem("token", res.data.data.token);
              //记住密码
              localStorage.setItem("username", this.loginformUser.username);
              localStorage.setItem("password", this.loginformUser.password);
              this.$message.success(res.data.msg);
              this.$router.push("/");
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((error) => {
            this.loading = false; // 隐藏加载图标
            this.$message.error("登录失败，请稍后再试");
          });
      } else {
        // 用户未同意用户协议，给出提示信息
        this.$message.info("请先同意用户协议");
      }
    },

    handleEnterKey(event) {
      if (event.key === "Enter" && this.isFormValid()) {
        this.onSubmit();
      }
    },
    isFormValid() {
      // 检查表单是否有数据
      return this.loginformUser.username && this.loginformUser.password;
    },
    toRegister() {
      this.$router.push("/register");
    },

    refreshCode() {
      // 刷新验证码
      this.getCode();
    },

    // 记住密码
    rememberPwd() {
      if (localStorage.getItem("username") != null && localStorage.getItem("password") != null){
        this.loginformUser.username = localStorage.getItem("username");
        this.loginformUser.password = localStorage.getItem("password");
      }
    },
  },
  mounted() {
    this.loaded();
    this.getCode();
    // 在组件挂载后监听回车键事件
    window.addEventListener("keyup", this.handleEnterKey);
    this.rememberPwd();
  },
  beforeDestroy() {
    // 在组件销毁前移除回车键事件监听
    window.removeEventListener("keyup", this.handleEnterKey);
  },
};
</script>
  
  
  
  
  
<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow: hidden;
  .center {
    position: relative;
    height: 600px;
    width: 100%;
    background: url("../../assets/images/login.png") no-repeat;
    background-size: cover;

    .login_container {
      position: absolute;
      width: 450px;
      height: 100%;
      left: 40%;
      top: 165px;
      .login {
        padding: 20px 20px 20px 20px;
        width: 350px;
        border-radius: 10px;
        box-shadow: 2;
        padding: 20px;

        background: rgb(
          255 255 255 / 4%
        ); /* 使用 rgba() 函数设置背景颜色和透明度 */
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 这里也可以使用 rgba() 函数设置阴影的颜色和透明度 */
        .title {
          width: 100%;
          height: 50px;
          span {
            margin-left: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
          }
          span.active {
            color: #3776da;
          }
        }
      }
      .login_form {
        box-shadow: 2;
      }
    }
  }
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>